<%--
  Created by IntelliJ IDEA.
  User: User
  Date: 2024/9/6
  Time: 8:45
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script>


        function f1(){
           let xhr;
           if(window.XMLHttpRequest){
               
               //创建ajax引擎对象
               xhr=new XMLHttpRequest();
               console.log(xhr);
           }else{

               //表示早期的IE浏览器，此时通过IE的方式获取
               xhr=new ActiveXObject("Microsoft.XMLHTTP");
               console.log(xhr)
           }
        }

        function sayHello(){
            // 1.获取ajax引擎对象
            let xhr=new XMLHttpRequest();
            console.log(xhr.readyState);//0
            // 2.准备回调函数
            // 回调函数：没有立马执行的函数，在这个地方表示响应回来之后调用的函数
            xhr.onreadystatechange=function(){

                //获取ajax的请求状态
                console.log(xhr.readyState);
                //获取http请求状态
                console.log(xhr.status);
                //只有ajax请求处理完成，且http请求响应成功之后才需要对响应结果做处理，成功响应后会返回对应数据
                //此时就可以对响应数据做处理
                if(xhr.readyState==4 && xhr.status==200){
                    let result=xhr.responseText;//获取响应的字符串文本
                    console.log(result);
                    document.getElementById("mydiv").innerHTML=result;
                }
            };

            //建议与后端的连接  xhr.open("请求方式",url,布尔值)
            xhr.open("get","${pageContext.request.contextPath}/sayHello",true);

            //发送请求
            xhr.send(null);
        }
    </script>
</head>
<body>
    <input type="button" onclick="f1()" value="获取ajax引擎对象">
    <input type="button" onclick="sayHello()" value="sayHello">
    <div id="mydiv">

    </div>
    <input type="text">
</body>
</html>
